<template>
  <div class="book">
    <div :style="effectStyle" class="effect">
      <div class="horn" :style="hornStyle">22222222222222222</div>
    </div>
    <div class="page" ref="page">
      <div :style="effectStyle">
        <div
          :style="contentStyle"
          @touchstart.stop.prevent="mousedown"
          @touchend.stop.prevent="mouseup"
          @touchmove.stop.prevent="touchmove"
        >
        1111111111111111111111111111111111
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "@/minxs/mixin.js";
import mounted from "./mounted";
export default {
  data() {
    return {
      effectStyle: {},
      hornStyle: {},
      contentMainStyle: {},
      contentStyle: {}
    };
  },
  mounted,
  mixins: [mixin],
  methods: {
    // 获取事件触发位置
    getEventPosition({ pageX, pageY }) {
      // 测试先右上角
      this.position = "rt";
      this.moveOption = {
        startX: this.clientWidth,
        // startY: this.clientWidth,
        startY: 0,
        moveX: 0,
        moveY: 0
      };
    },
    touchmove(e) {
      let clientWidth = document.body.clientWidth;
      let clientHeight = document.body.clientHeight;
      // 获取操作dom 距离屏幕边距
      clientWidth = (clientWidth - this.clientWidth) / 2; //+ (this.sqrt - this.clientWidth) / 2;
      clientHeight = (clientHeight - this.clientHeight) / 2;
      this.moveOption.moveX = e.targetTouches[0].pageX - clientWidth; //2; // - (this.sqrt - this.clientWidth * 2) / 2;
      this.moveOption.moveY = e.targetTouches[0].pageY - clientHeight; //2;
      let angle =
        90 -
        this.getAngle({
          ...this.moveOption
        });
      // 方块移动比例 x/X = y/Y
      // 小 x y z
      let SDX = Math.abs(this.moveOption.moveX - this.clientWidth) / 2;
      let SDY = this.moveOption.moveY / 2;
      let SDZ = Math.sqrt(Math.pow(SDX, 2) + Math.pow(SDY, 2));

      // 大 x y z
      let BIGSDZ = this.clientWidth - SDY / (SDX / SDY) - SDX; //大的
      let BL = BIGSDZ / SDZ; // 比例
      let BIGSDY = SDY * BL;
      let BIGSDX = SDX * BL; //大的
      let moveOption = this.hypotenuse(BIGSDX, angle);
      angle = 90 - angle;
      // 动画效果遮罩层数据更新
      this.updateContentMainStyle(moveOption.x, -moveOption.y, -angle);
      // 内容区域数据更新
      this.updateContentStyle(-moveOption.x, moveOption.y, -angle);

      // 边角更新 

      let radian = ((2 * Math.PI) / 360) * (90 - angle);
      // let YK = this.hypotenuse(SDY, angle).x + SDX;
      let YK = SDY * Math.tan(radian) + SDX;
      // SDY  SDX
      // 得到 X 相对于 遮罩层
      let MOption = this.hypotenuse(YK, angle);
      let MX, MY; 
        MY = MOption.y; // ok 

      // 已知高度和角度 求对边
      // 弧度
      MX=  MY * Math.tan(radian) + BIGSDY;  
      // 边角动画
      this.updateHornStyle(MX, MY, angle);
    },
    //
    mouseup(e) {
      console.log("释放");
      // console.log(e.targetTouches[0].pageY)
      // console.log(e.targetTouches[0].pageX)
    },
    //
    mousedown(e) {
      console.log(e);
      this.getEventPosition({
        pageX: e.targetTouches[0].pageX,
        pageY: e.targetTouches[0].pageY
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" >
@import "./index.less";
</style>
